<template>
	<view class="raffle">
		<view class="raffle_ruler f">
			<view class="" @click="$navTo('./raffle_ruls')">抽奖规则</view>
		</view>

		<view class="navs_lines f f_column f_align_center">
			<view class="nav_title">上期开奖号码</view>
			<view class="raf_time">第{{lottery.lastIssueCode}}期</view>
			<view class="raf_num">
				<view class="raf_num_item" v-for="(item,index) in lottery.lastLotteryNumber" :key="index">{{item}}</view>
			</view>
			<view class="raf_warps_num f f_column f_align_center">
				<text>奖池余额(金币)</text>
				<view class="raf_price bold">{{lottery.amount}}</view>
			</view>
			<view class="refash_time">本期更新于:{{lottery.lotteryTime}}</view>
		</view>

		<view class="raffle_now bold" @click="startRaff">
			支付奖券，参与抽奖
		</view>

		<view class="user_info f f_align f_align_center" @click="raffleToNow">
			<view class="f f_align_center">
				<view class="u_head f_shrink0">
					<image class="autoImg" :src="defaultHead(userInfo.userHeadUrl)" mode=""></image>
				</view>
				<view class="f f_column">
					<text class="b_text bold">{{userInfo.userName}}</text>
					<text>剩余奖券：{{userInfo.accountEntity.raffleTicket}}</text>
				</view>
			</view>
			<view class="f f_align_center">
				<view class="f f_column f_align_end">
					<text class="b_text bold">本期投注</text>
					<text>{{lottery.currentUserBetNum}}次</text>
				</view>
				<i class="iconfont iconzu5536"></i>
			</view>
		</view>

		<view class="navs_lines mt f f_column f_align_center">
			<view class="nav_title">做任务,得奖券</view>
			<view class="raf_warps_num mt task_pad f f_align f_align_center">
				<view class="f f_align_center">
					<image class="task_ico f_shrink0" src="/static/cj/wx@2x.png" mode=""></image>
					<view class="f f_column">
						<text class="bold task_friend">分享好友</text>
						<text class="">可获得<text class="price_red">1</text>奖券</text>
					</view>
				</view>
				<view class="doTask bold" @click="$navTo('../share/share')">去分享</view>
			</view>
			<view class="raf_warps_num mt task_pad f f_align f_align_center">
				<view class="f f_align_center">
					<image class="task_ico f_shrink0" src="/static/cj/task@2x.png" mode=""></image>
					<view class="f f_column">
						<text class="bold task_friend">做任务</text>
						<text class="">可获得<text class="price_red">1</text>奖券</text>
					</view>
				</view>
				<view class="doTask bold" @click="$tabTo('../task/task')">做任务</view>
			</view>
		</view>


		<image class="raffle_ico cj_l" src="/static/cj/b_r@2x.png" mode=""></image>
		<image class="raffle_ico cj_r" src="/static/cj/b_l@2x.png" mode=""></image>
		<!-- 中间键功能 -->
		<mainBtn />

		<toast :visible.sync="showRaffs">
			<template slot="content">
				<view class="raff_toast f f_column f_align_center">
					<text class="t_text">请输入你想要购买的号码</text>
					<vInput :num="6" @isDone="isInputOk"></vInput>
					<button class="raff_now_btn bold" @click="raffle_now">
						立即投注
					</button>
				</view>
			</template>
		</toast>

	</view>
</template>

<script>
	import { mapMutations } from 'vuex';
	import mainBtn from '@/components/mainBtn/mainBtn.vue'
	import vInput from '@/components/vInput/vInput.vue'
	import { _defaultHead, _formatMoney } from '@/utils/util.js'
	export default {
		data() {
			return {
				showRaffs:false,
				userInfo:{
					userName:'-',
					accountEntity:{
						raffleTicket:0
					}
				},
				lottery:{
					jackpotId:'',
					amount:0,
					lotteryTime:'', 	//开奖时间
					issueCode:'', 		//期号
					currentUserBetNum:0,    //当期用户投注数量

					lastLotteryNumber:'-----',	//上期开奖号码
					lastIssueCode: ""   	//上期期号
				},
				redeemCode:''
			};
		},
		components:{
			mainBtn,vInput
		},
		onShow() {
			this.OPEN_MID_BTN(false);
			this.getUserInfo();
			this.getJackpot();
		},
		onLoad() {

		},
		methods: {
			...mapMutations([
				'OPEN_MID_BTN'
			]),
			//获取用户信息哦
			async getUserInfo(){
				const _this = this;
				let res = (await _this.$http('/api/auth/user/getUserInfo','POST',{})).data;
				if(res && res.code == '0'){
					let userInfo = res.data;
					_this.userInfo = userInfo;
					uni.setStorageSync('userInfo',userInfo);
				}
			},
			//获取奖池信息
			async getJackpot(){
				const _this = this;
				let res = (await _this.$http('/api/auth/jackpot/getCurrentJackpot','POST',{})).data;
				uni.stopPullDownRefresh();
				if(res && res.code == '0'){
					let obs = JSON.parse(JSON.stringify(res.data));
					obs.amount = _formatMoney(obs.amount);
					_this.lottery = Object.assign(_this.lottery,obs);
				}else{
					_this.$showToast(res.code);
				}
			},
			// //获取当前正在活动的奖池信息
			// async getCurrentJackpot(){
			// 	const _this = this;
			// 	let res = (await _this.$http('/api/auth/jackpot/getCurrentJackpot','POST',{})).data;
			// },

			defaultHead(url){
				return _defaultHead(url);
			},
			//开始抽奖
			startRaff(){
				if(this.userInfo.accountEntity && this.userInfo.accountEntity.raffleTicket > 0){
					this.showRaffs	= true;
				}else{
					this.$showToast('抽奖券不足，快去先做任务吧～');
				}

			},
			//输入完成
			isInputOk(val){
				this.redeemCode = val;
			},
			//立即投注
			raffle_now(){
				const _this = this;
				if(_this.redeemCode == ''){
					return _this.$showToast('请输入您想要的号码！');
				};
				if(_this.redeemCode.length < 6){
					return _this.$showToast('请输入您想要的六位号码！');
				};
				_this.$http('/api/auth/jackpot/applyJackpot','POST',{
					jackpotId:_this.lottery.jackpotId,
					redeemCode:_this.redeemCode
				}).then(res=>{
					if(res && res.data.code == '0'){
						_this.redeemCode = '';
						_this.showRaffs	= false;
						_this.$showToast('参与成功，请等待开奖～');
						_this.getUserInfo();
						_this.getJackpot();
					}else{
						_this.$showToast(res.data.msg)
					}
				}).catch(()=>{

				});
			},
			//抽奖记录
			raffleToNow(){
				const _this = this;
				let token = uni.getStorageSync('token');
				if(token && token != ''){
					_this.$navTo('./lotteryRecord')
				}else{
					_this.$loginAuth();
				}
			}
		},
		watch:{
			showRaffs(val){
				if(val){
					uni.hideTabBar();
				}else{
					uni.showTabBar()
				}
			}
		},
		onPullDownRefresh() {
			this.getUserInfo();
			this.getJackpot();
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes rota3D{
		0%{
			transform: scale(1);
		}
		50%{
			transform: scale(1.1);
		}
		75%{
			transform: scale(1);
		}
		100%{
			transform: scale(0.9);
		}
	}
	.raffle{
		box-sizing: border-box;
		width: 100%;
		min-height: 100vh;
		background:#FF7500 url('/static/cj/top@2x.png') no-repeat center top;
		background-size: 100% 600rpx;
		position: relative;
		padding: 0 24rpx 60rpx;
		padding-top: calc(var(--status-bar-height) + 23rpx);

		.raff_toast{
			box-sizing: border-box;
			width: 668rpx;
			height: 960rpx;
			background: url('/static/cj/raff_bg@2x.png') no-repeat center;
			background-size: 100% 100%;
			padding: 560rpx 60rpx 60rpx;
			.t_text{
				color: #C1A985;
				margin-bottom: 46rpx;
			}
			.raff_now_btn{
				width: 100%;
				height: 109rpx;
				background-color: #FDDF52;
				border-radius: 12rpx;
				@include flex_center;
				font-size: 40rpx;
				color: #D93F00;
				margin-top: 44rpx;
				box-shadow: 0 3rpx 8rpx #FF7500;
			}
		}

		.user_info{
			box-sizing: border-box;
			width: 100%;
			height: 160rpx;
			padding: 36rpx;
			background: url('/static/cj/btn@2x.png') no-repeat center;
			background-size: 100% 100%;
			font-size: 22rpx;
			color: #868686;
			.u_head{
				width: 88rpx;height: 88rpx;
				margin-right: 12rpx;
				image{border-radius: 50%;}
			}
			.b_text{
				color: #222222;
				margin-bottom: 8rpx;
			}
		}


		.raffle_ruler{
			font-size: 30rpx;
			color: #fff;
			justify-content: flex-end;
		}
		.raffle_now{
			width: 600rpx;
			height: 120rpx;
			background-color: #FEE15B;
			border-radius: 70rpx;
			font-size: 40rpx;
			color: #D93F00;
			@include flex_center;
			margin: 24rpx auto;
			animation:rota3D 2s linear infinite;
		}

		.navs_lines{
			margin-top: 233rpx;
			background-color: #FEF5F0;
			border-radius: 6rpx;
			position: relative;z-index: 111;
			&.mt{
				margin-top: 38rpx;
				padding-bottom: 40rpx;
			}
			.raf_num{
				@include flex_align;
				margin-top: 8rpx;
				.raf_num_item{
					width: 92rpx;height: 92rpx;
					background: url('/static/cj/radio@2x.png') no-repeat center;
					background-size: 100% 100%;
					@include flex_center;
					font-size: 42rpx;
					color: #CE7501;
				}
			}
			.nav_title{
				width: 100%;
				height: 60rpx;
				padding-bottom: 20rpx;
				background:url('/static/cj/navs@2x.png') no-repeat center top;
				background-size: 100% 80rpx;
				@include flex_center;
				font-size: 32rpx;
				color: #fff;
				margin-top: -15rpx;
			}
			.raf_time{
				font-size: 22rpx;
				color: #CE7501;
				margin-top: 10rpx;
			}
			.raf_warps_num{
				width: 654rpx;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 12rpx;
				margin: 32rpx 0 16rpx;
				padding: 20rpx 0;
				font-size: 24rpx;
				color: #CEB08A;
				&.mt{margin-top: 16rpx;}
				&.task_pad{
					padding: 28rpx 24rpx;
					font-size: 22rpx;
					color: #999999;
				}
				.task_ico{
					width: 84rpx;height: 84rpx;
					margin-right: 12rpx;
				}
				.raf_price{
					font-size: 48rpx;
				}
				.task_friend{
					font-size: 28rpx;
					color: #333333;
					margin-bottom: 10rpx;
				}
				.price_red{color: #FF3C39;padding: 0 6rpx;}
				.doTask{
					@include flex_center;
					font-size: 22rpx;
					color: #B05A0F;
					width: 136rpx;
					height: 54rpx;
					border-radius: 25rpx;
					background-image: linear-gradient(to right,#FDE055,#FFBB01);
				}
			}
			.refash_time{
				color: #868686;
				padding: 16rpx 0 32rpx;
			}
		}


		.raffle_ico{
			width: 116rpx;
			height: 164rpx;
			position: absolute;
			bottom: 0;
			z-index: 1;
			&.cj_l{
				left: 0;
			}
			&.cj_r{
				right: 0;
			}
		}
	}
</style>
